<template>
  <div class="test-records">
    <div class="action-bar">
      <div class="bar-left">
        <div class="bar-delete">
          <span class="iconfont icon-shanchu" @click="deleteRecordArr">
            删除</span
          >
        </div>
      </div>
      <div class="bar-right">
        <div class="bar-test">
          <span>运行状态：</span>
          <el-select
            v-model="searchData.executionStatus"
            placeholder="请选择运行状态"
            clearable
          >
            <el-option label="运行中" :value="0"></el-option>
            <el-option label="完成" :value="1"></el-option>
            <el-option label="暂停" :value="2"></el-option>
            <el-option label="错误" :value="3"></el-option>
            <el-option label="阻塞" :value="4"></el-option>
            <el-option label="终止" :value="5"></el-option>
          </el-select>
        </div>
        <div class="bar-testStartTime">
          <span>测试名称：</span>
          <el-input
            v-model="searchData.taskName"
            clearable
            placeholder="请输入内容"
          ></el-input>
        </div>
        <div class="bar-testEndTime">
          <span>测试类型：</span>
          <el-select
            v-model="searchData.testType"
            placeholder="请选择测试类型"
            clearable
          >
            <el-option label="话音测试" :value="1"></el-option>
            <el-option label="数据测试" :value="2"></el-option>
            <el-option label="视频测试" :value="3"></el-option>
          </el-select>
        </div>
        <div class="bar-testType">
          <span>测试时间：</span>
          <el-date-picker
            v-model="searchData.executionStartTime"
            value-format="yyyy-MM-dd HH:mm:ss"
            type="datetime"
            placeholder="请选择开始时间"
          ></el-date-picker>
        </div>
        <div class="bar-search">
          <span @click="searchTask">搜索</span>
        </div>
      </div>
    </div>
    <div class="display-table">
      <div class="display-table-content">
        <el-table
          ref="multipleTable"
          :data="tableData"
          stripe
          :header-cell-style="{
            textAlign: 'center',
            background: '#013770',
            color: '#1adafb',
            fontSize: '#2rem',
            border: 'none',
          }"
          :cell-style="{
            textAlign: 'center',
            background: '#020e36',
            color: '#ffffff',
            border: 'none',
          }"
          height="620"
          style="width: 100%"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="155"> </el-table-column>
          <el-table-column prop="taskName" label="测试任务名称" width="130">
          </el-table-column>
          <el-table-column label="测试类型" width="230">
            <template slot-scope="scope">
              <span v-if="scope.row.testType == 1" class="span-green">{{
                testTypeDict[scope.row.testType]
              }}</span>
              <span v-else-if="scope.row.testType == 2" class="span-skyblue">{{
                testTypeDict[scope.row.testType]
              }}</span>
              <span v-else class="span-lilac">{{
                testTypeDict[scope.row.testType]
              }}</span>
            </template>
          </el-table-column>
          <el-table-column label="运行状态" width="230">
            <template slot-scope="scope">
              <span
                v-if="scope.row.executionStatus == 0"
                class="span-running"
                >{{ runExecutionStatusDict[scope.row.executionStatus] }}</span
              >
              <span
                v-else-if="scope.row.executionStatus == 1"
                class="span-success"
                >{{ runExecutionStatusDict[scope.row.executionStatus] }}</span
              >
              <span
                v-else-if="scope.row.executionStatus == 2"
                class="span-pause"
                >{{ runExecutionStatusDict[scope.row.executionStatus] }}</span
              >
              <span
                v-else-if="scope.row.executionStatus == 3"
                class="span-error"
                >{{ runExecutionStatusDict[scope.row.executionStatus] }}</span
              >
              <span
                v-else-if="scope.row.executionStatus == 4"
                class="span-pause"
                >{{ runExecutionStatusDict[scope.row.executionStatus] }}</span
              >
              <span v-else class="span-stop">{{
                runExecutionStatusDict[scope.row.executionStatus]
              }}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="executionStartTime"
            label="创建时间"
            width="200"
          >
          </el-table-column>
          <el-table-column
            prop="executionDuration"
            label="运行时间(分)"
            width="200"
          >
          </el-table-column>
          <el-table-column label="详细测试日志" width="230">
            <template slot-scope="scope">
              <span class="span-check-dialog" @click="showDialog(scope)"
                >查看</span
              >
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope"> 
              <span class="span-start"></span>
              <span class="span-check"></span>
              <span
                class="span-delete"
                @click="deleteOneRecord(scope.row)"
              ></span>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="display-table-pagination">
        <div class="pagination-position">
          <span>{{ `共${total}条` }}</span>
          <span class="prev" @click="prevPage">上一页</span>
          <el-input class="page-input" v-model="currentPage"></el-input>
          <span class="next" @click="nextPage">下一页</span>
          <span class="total-page">{{ `${currentPage}/${totalPage}` }}</span>
          <span class="jumpTo">跳转至</span>
          <el-input class="page-input" v-model="jumpPage"></el-input>
          <span class="jump" @click="jumpQueryPage">跳转</span>
        </div>
      </div>
    </div>
    <el-dialog
      :visible.sync="dialogVisible"
      :close-on-click-modal="true"
      :show-close="false"
      custom-class="empty-dialog"
      append-to-body
      width="45%"
      height="auto"
      top="10vh"
    >
      <div class="loginfo-content">
        <div class="loginfo-content-title">节点日志信息</div>
        <div class="loginfo-content-info">
          <template v-if="logInfoList">
            <p v-for="(item, index) in logInfoList" :key="index">{{ item }}</p>
          </template>
          <template v-else>
            <p>暂无数据</p>
          </template>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getByCondition, queryById, deleteRecord } from "@/api/TestRecords";
export default {
  name: "TestRecords",
  data() {
    return {
      searchData: {
        pageNum: 1,
        pageSize: 10,
        executionStatus: "",
        taskName: "",
        testType: "", // 测试类型
        executionStartTime: "", // 测试开始时间
      },
      tableData: [
      ],
      multipleSelection: [],
      /* 字典项 */
      testTypeDict: {
        1: "话音",
        2: "数据",
        3: "视频",
      },
      runExecutionStatusDict: {
        0: "运行中",
        1: "完成",
        2: "暂停",
        3: "错误",
        4: "阻塞",
        5: "终止",
      },
      // 当前页
      currentPage: 1,
      // 总页数
      totalPage: 0,
      // 总条数
      total: 0,
      // 跳转页
      jumpPage: 1,
      selectedIds: [], // 用来保存选中的 ID 数组
      // 任务定义弹窗
      dialogVisible: false,
      // 查看，日志详情的信息
      logInfoList: [],
    };
  },
  props: {},
  components: {},
  methods: {
    // 搜索
    searchTask() {
      console.log("搜索");
      this.searchData.pageNum = this.currentPage;
      this.getByCondition(this.searchData);
    },
    // 删除
    deleteOneRecord(row) {
      console.log("删除", row.taskId);
      this.deleteRecord([row.taskId]);
    },
    // 多选框操作，
    handleSelectionChange(selection) {
      // 清空已选中的 ID 数组
      this.selectedIds = [];
      // 将当前选中的所有 ID 放入 selectedIds 数组中
      selection.forEach((item) => {
        this.selectedIds.push(item.taskId);
      });
    },
    // 删除多组
    deleteRecordArr() {
      console.log("删除", this.selectedIds);
      this.deleteRecord(this.selectedIds);
    },
    // 删除数据的接口
    deleteRecord(deleteArr) {
      // 注意要String处理
      deleteRecord(deleteArr)
        .then((res) => {
          console.log(res);
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 查询数据，搜索，下一页
    getByCondition(params) {
      getByCondition(params)
        .then((res) => {
          const data = res.rows;
          const code = res.code;
          if (code == 200) {
            // this.$message.success("查询测试任务信息成功");
          } else {
            // this.$message.error("查询测试任务信息失败");
          }
          if (data != null) {
            this.tableData = data;
            this.total = res.total;
            this.totalPage = Math.ceil(res.total / 10);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    //prevPage上一页
    prevPage() {
      if (this.currentPage == 1) {
        return;
      }
      this.currentPage--;
      this.searchData.pageNum = this.currentPage;
      this.getByCondition(this.searchData);
    },
    //nextPage下一页
    nextPage() {
      this.currentPage++;
      this.searchData.pageNum = this.currentPage;
      this.getByCondition(this.searchData);
    },
    // 跳转页面
    jumpQueryPage() {
      this.searchData.pageNum = this.jumpPage;
      this.currentPage = this.jumpPage;
      this.getByCondition(this.searchData);
    },

    // 任务定义弹窗
    showDialog(scope) {
      this.logInfoList = scope.row.logInfoList;

      this.dialogVisible = true;
    },
  },
  computed: {},
  created() {},
  mounted() {
    this.getByCondition(this.searchData);
  },
  destroyed() {},
};
</script>

<style lang="scss" scoped>
.test-records {
  padding: 0 1.25rem;
  display: flex;
  flex-direction: column;
  height: 100%;
  .action-bar {
    height: 5.25rem;
    line-height: 5.25rem;
    background: url("~@/assets/images/taskArrangement/border.png") no-repeat
      center center;
    background-size: 100% 100%;
    display: flex;
    flex-direction: row;
    align-items: center;

    .bar-left {
      flex: 2;
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      .bar-import,
      .bar-export,
      .bar-delete {
        cursor: pointer;
        margin: 0 1.25rem;
        :hover {
          color: #1adafb;
        }
      }
      span {
        padding: 0.3125rem;
      }
    }
    .bar-right {
      flex: 6;
      display: flex;
      flex-direction: row;
      font-size: 1rem;
      .bar-test,
      .bar-testStartTime,
      .bar-testEndTime,
      .bar-testType {
        display: flex;
        flex-direction: row;
        flex: 2;
      }
      .bar-search {
        flex: 1;

        :hover {
          color: #1adafb;
        }
        span {
          display: inline-block;
          text-align: center;
          margin-left: 0.625rem;
          width: 5rem;
          height: 2.5rem;
          line-height: 2.5rem;
          background: url("~@/assets/images/taskArrangement/search-button.png")
            no-repeat center center;
          background-size: 100% 100%;
          cursor: pointer;
        }
      }
    }
  }
  .display-table {
    flex: 1;
    margin-top: 1.25rem;
    display: flex;
    flex-direction: column;
    .display-table-content {
      height: 90%;
    }
    .display-table-pagination {
      flex: 1;
      position: relative;
      .pagination-position {
        position: absolute;
        right: 2.5rem;
        top: 0;
        font-size: 1rem;
        color: #fff;
        .prev,
        .next,
        .jump,
        .jumpTo {
          margin: 0 0.625rem;
          text-align: center;
          height: 1.875rem;
          line-height: 1.875rem;
          display: inline-block;
        }

        .prev,
        .next {
          cursor: pointer;
          background: url("~@/assets/images/taskArrangement/prev_next.png")
            no-repeat center center;
          background-size: 100% 100;
          width: 5rem;
        }
        .jump {
          cursor: pointer;
          background: url("~@/assets/images/taskArrangement/jump.png") no-repeat
            center center;
          background-size: 100% 100;
          width: 3.75rem;
        }
        .page-input {
          width: 3.75rem;
        }
        .total-page {
          display: inline-block;
          width: 6.25rem;
          height: 1.875rem;
          line-height: 1.875rem;
          text-align: center;
        }
      }
    }
  }
  ::v-deep .el-input {
    width: 11.25rem;
  }
  .span-skyblue,
  .span-green,
  .span-lilac,
  .span-running,
  .span-success,
  .span-error,
  .span-pause,
  .span-stop {
    display: inline-block;
    width: 6rem;
    height: 2.125rem;
    line-height: 2.125rem;
    font-size: 1.125rem;
  }
  .span-skyblue {
    background: url("~@/assets/images/taskArrangement/background-skyblue.png")
      no-repeat center center;
    background-size: 100% 100%;
  }
  .span-green {
    background: url("~@/assets/images/taskArrangement/background-green.png")
      no-repeat center center;
    background-size: 100% 100%;
  }
  .span-lilac {
    background: url("~@/assets/images/taskArrangement/background-lilac.png")
      no-repeat center center;
    background-size: 100% 100%;
  }
  .span-running {
    background: url("~@/assets/images/TestRecords/running.png") no-repeat center
      center;
    background-size: 100% 100%;
  }
  .span-success {
    background: url("~@/assets/images/TestRecords/success.png") no-repeat center
      center;
    background-size: 100% 100%;
  }
  .span-error {
    background: url("~@/assets/images/TestRecords/error.png") no-repeat center
      center;
    background-size: 100% 100%;
  }
  .span-pause {
    background: url("~@/assets/images/TestRecords/pause.png") no-repeat center
      center;
    background-size: 100% 100%;
  }
  .span-stop {
    background: url("~@/assets/images/TestRecords/stop.png") no-repeat center
      center;
    background-size: 100% 100%;
  }
  .span-start,
  .span-check,
  .span-edit,
  .span-delete {
    display: inline-block;
    width: 1.125rem;
    height: 1.125rem;
    margin: 0 0.625rem;
    cursor: pointer;
  }
  .span-start {
    background: url("~@/assets/images/taskArrangement/start.png") no-repeat
      center center;
    background-size: 100% 100%;
  }
  .span-check {
    background: url("~@/assets/images/taskArrangement/check.png") no-repeat
      center center;
    background-size: 100% 100%;
    width: 1.5rem;
    height: 1.125rem;
  }
  .span-edit {
    background: url("~@/assets/images/taskArrangement/edit.png") no-repeat
      center center;
    background-size: 100% 100%;
  }
  .span-delete {
    background: url("~@/assets/images/taskArrangement/delete.png") no-repeat
      center center;
    background-size: 100% 100%;
  }
  .span-check-dialog {
    color: #1adafb;
    border-bottom: 0.0625rem solid #1adafb;
    cursor: pointer;
  }
}
.loginfo-content {
  height: 31.25rem;
  background-color: #292c35;
  display: flex;
  flex-direction: column;
  .loginfo-content-title {
    height: 3.125rem;
    text-align: center;
    font-size: 1.25rem;
    color: #fff;
    line-height: 3.125rem;
  }
  .loginfo-content-info {
    flex: 1;
    overflow-y: auto;
    p {
      color: #9298a6;
      padding: 0 1.25rem;
    }
  }
}
</style>
